<template>
  <div>
    <cube-form :model="model">
      <cube-form-group legend="商铺信息">
        <cube-form-item :field="fields[0]"></cube-form-item>
        <cube-form-item :field="fields[1]"></cube-form-item>
        <cube-form-item :field="fields[2]"></cube-form-item>
      </cube-form-group>
      <cube-form-group>
        <cube-button type="submit">Submit</cube-button>
      </cube-form-group>
    </cube-form>
  </div>
</template>

<script>
export default {
  name: 'ShopRegister2',
  data () {
    return {
      model: {
        shopName: '我的店铺',
        shopCategory: '',
        shopArea: '',
        shopAddr: '详细地址',
        shopPhone: '15029057276',
        shopImg: [],
        shopDesc: '商铺简介'
      },
      fields: [
        {
          type: 'input',
          modelKey: 'shopName',
          label: '商铺名称',
          props: {
            placeholder: '请输入商铺名称'
          },
          rules: {
            required: true
          },
          trigger: 'blur'
        },
        {
          type: 'select',
          modelKey: 'shopCategory',
          label: '商铺分类',
          props: {
            placeholder: '请选择商铺分类',
            options: []
          },
          rules: {
            required: true
          }
        },
        {
          type: 'select',
          modelKey: 'shopArea',
          label: '所属地区',
          props: {
            placeholder: '请选择所属地区',
            options: []
          },
          rules: {
            required: true
          }
        },
        {
          type: 'input',
          modelKey: 'shopAddr',
          label: '详细地址',
          props: {
            placeholder: '请输入详细地址'
          },
          rules: {
            required: true
          },
          trigger: 'blur'
        },
        {
          type: 'input',
          modelKey: 'shopPhone',
          label: '联系电话',
          props: {
            placeholder: '请输入联系电话'
          },
          rules: {
            required: true
          },
          trigger: 'blur'
        },
        {
          type: 'upload',
          modelKey: 'shopImg',
          label: '缩略图',
          props: {
            max: 1
          },
          events: {
            'file-removed': (...args) => {
              console.log('file removed', args)
            }
          },
          rules: {
            required: true,
            uploaded: (val, config) => {
              return Promise.all(
                val.map((file, i) => {
                  return new Promise((resolve, reject) => {
                    if (file.uploadedUrl) {
                      return resolve()
                    }
                    setTimeout(() => {
                      if (i % 2) {
                        reject(new Error())
                      } else {
                        file.uploadedUrl = 'uploaded/url'
                        resolve()
                      }
                    }, 1000)
                  })
                })
              ).then(() => {
                return true
              })
            }
          },
          messages: {
            uploaded: '上传失败'
          }
        },
        {
          type: 'textarea',
          modelKey: 'shopDesc',
          label: '商铺简介',
          props: {
            placeholder: '请输入商铺简介',
            maxlength: 300
          },
          rules: {
            required: true
          },
          debounce: 100
        }
      ]
    }
  }
}
</script>

<style scoped>
</style>
